<template>
	<view class="container">
		<view class="header">
			<view class="header-title-left">欢迎来到盐池零工平台自助系统</view>
			<view class="back" @click="goBack"><uni-icons type="left" size="30"></uni-icons>返回</view>
			<view class="header-title">
				<view>信息登记</view>
			</view>
		</view>
		<view class="form">
			<image class="image" :src="user.head"></image>
			<!-- 
			 <view>姓名：{{ user.userName}}</view>
			 <view>性别：{{ user.sex}}</view>
			 <view>民族：{{ user.nation}}</view>
			 <view>住址：{{ user.address}}</view>
			 <view>身份证号：{{ user.idCard}}</view>
			 <view>身份证有效期：{{ user.idCardExpirationDate }} </view>
			 <view>发证机关：{{ user.issuingAuthority }}</view>
			 
			 
			 
			 -->
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="baseForm" :modelValue="baseFormData">
				<uni-forms-item label="姓名" label-width="auto">
					<template>
						<view>{{ user.userName}}</view>
					</template>
				</uni-forms-item>

				<uni-forms-item label="性别" label-width="auto">
					<template>
						<view>{{ user.sex}}</view>
					</template>
				</uni-forms-item>

				<uni-forms-item label="民族" label-width="auto">
					<template>
						<view>{{ user.nation}}</view>
					</template>
				</uni-forms-item>

				<!-- <uni-forms-item label="出生年月" label-width="auto">
					<template>
						<view>{{ user.}}</view>
					</template>
				</uni-forms-item> -->

				<uni-forms-item label="住址" label-width="auto">
					<template>
						<view>{{ user.address}}</view>
					</template>
				</uni-forms-item>

				<uni-forms-item label="身份证号" label-width="auto">
					<template>
						<view>{{ user.idCard}}</view>
					</template>
				</uni-forms-item>

				<uni-forms-item label="身份证有效期" label-width="auto">
					<template>
						<view>{{ user.idCardExpirationDate }}</view>
					</template>
				</uni-forms-item>

				<uni-forms-item label="发证机关" label-width="auto">
					<template>
						<view>{{ user.issuingAuthority }}</view>
					</template>
				</uni-forms-item>

				<!-- <uni-forms-item label="手机号" label-width="auto">
					<template class="photo">
						<uni-easyinput class="input" v-model="baseFormData.photo" placeholder="请输入手机号" />
						<button @click="getCode" size="default" type="default"
							style="position: absolute; top: 0; right: 0; background-color: #4b81ff; color: #fff;">获取验证码</button>
					</template>
				</uni-forms-item> -->

				<!-- <uni-forms-item label="验证码" label-width="auto">
					<uni-easyinput v-model="baseFormData.smsCode" placeholder="请输入验证码" />
				</uni-forms-item> -->


				<view class="go" @click="next">下一步<uni-icons type="right" size="30" color="#fff"></uni-icons></view>
			</uni-forms>
		</view>
		<view class="footer">

		</view>
	</view>

</template>

<script>
	import {
		getSmsCheck,
		login
	} from '@/api/home/index.js';
	export default {
		onLoad() {
			const user = uni.getStorageSync('user');
			console.log('公用数据信息', user);
			const type = uni.getStorageSync('type');
			this.user = user;
			this.type = type;

		},
		data() {
			return {
				type: '',
				user: {},
				userTypeMap: {
					worker: '1',
					company: '2',
				},
				// 基础表单数据
				baseFormData: {
					photo: '19995421509',
					smsCode: '',
				},

				// 单选数据源
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}, {
					text: '保密',
					value: 2
				}],
				// 多选数据源
				hobbys: [{
					text: '跑步',
					value: 0
				}, {
					text: '游泳',
					value: 1
				}, {
					text: '绘画',
					value: 2
				}, {
					text: '足球',
					value: 3
				}, {
					text: '篮球',
					value: 4
				}, {
					text: '其他',
					value: 5
				}],
				// 校验表单数据
				valiFormData: {
					name: '',
					age: '',
					introduction: '',
				},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					}
				},
			};
		},
		methods: {
			getCode() {
				const photo = this.baseFormData.photo;
				getSmsCheck(photo).then((res) => {
					uni.showToast({
						title: '发送成功,请注意手机查收',
					})
				})
			},
			goBack() {
				uni.navigateBack()
			},
			next() {

				if (this.type === 'worker') {
					uni.navigateTo({
						url: '/pages/worker/industry'
					})
				} else {
					uni.$u.route({
						url: 'pages/company/index'
					})
				}
				return;
				if (!this.baseFormData.smsCode) {
					uni.showToast({
						title: '验证码不能为空,请输入验证码',
						icon: 'none'
					})
					return;
				}
				const data = {
					...this.user,
					userType: this.userTypeMap[this.type],
					smsCode: this.baseFormData.smsCode,
					mobile: this.baseFormData.photo,
				}
				console.log('data', data);
				// return;
				login(data).then((res) => {
					console.log('res', res);
					uni.setStorageSync('token', {
						token: res.data.token
					})
					uni.setStorageSync('tokenId', {
						tokenId: res.data.tokenId
					})
					uni.setStorageSync('user', {
						user: res.data.user
					})
					if (this.type === 'worker') {
						uni.navigateTo({
							url: '/pages/worker/industry'
						})
					} else {
						uni.$u.route({
							url: 'pages/company/index'
						})
					}
					return;

				})
			}
		}
	}
</script>

<style lang="less" scoped>
	/* 基础样式 */
	body,
	page {
		font-family: Arial, sans-serif;
		background-color: #f4f6fa;
		margin: 0;
		padding: 0;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-items: center;
		height: 100vh;
		/* background-color: #CBE1FB; */
		/* 背景颜色 */
		background-image: url('../../static/images/background_2.png');
		/* 背景图片 */
		// background-size: cover;
		background-position: center;
		background-blend-mode: multiply;
		/* 背景混合模式，使颜色和图片叠加 */
	}

	.header {
		padding: 50px;
		width: 90%;

		.header-title-left {
			text-align: left;
			font-size: 32px;
			color: #384161;
			width: 100%;
		}

		.header-title {
			text-align: center;
			font-size: 120px;
			font-weight: 600;
			color: #4B81FF;
			width: 100%;
			margin: 100px auto 0px;
			/* 使文本居中时占据整行 */
			position: relative;
		}

		.back {
			position: absolute;
			font-size: 24px;
			color: #384161;
			line-height: 0px;
			width: 80px;
			height: 40px;
			left: 46px;
			top: 120px;
			/* 自动布局 */
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border: 1px solid #fff;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
			padding: 8px 24px 8px 24px;
		}
	}

	.form {
		position: relative;
		width: 800px;

		.image {
			width: 200px;
			border: 1px solid black;
			position: absolute;
			right: 0;
			top: 40px;
		}

		::v-deep .uni-forms-item {
			// line-height: 60px;
			margin: 50px;
		}

		::v-deep .uni-forms-item__label {
			font-size: 26px;
			font-weight: 600;
			color: #4B81FF;
		}

		::v-deep .uni-forms-item__content {
			font-size: 26px;
			font-weight: 600;
			line-height: 40px;
			color: #384161;
			// display: flex;
			// .input{
			// 	width: 300px;
			// }
			position: relative;

			.uni-easyinput {
				width: 450px;
			}

			.uni-easyinput__content-input {
				height: 45px;
			}

			.uni-input-input {
				font-size: 22px;
			}

			.uni-easyinput__placeholder-class {
				font-size: 18px;
			}

			.photo {
				display: flex;
			}
		}

		::v-deep .uni-forms>uni-form>span {
			position: relative;

			.go {
				font-size: 24px;
				color: #fff;
				background-color: #4B81FF;
				width: 150px;
				height: 40px;
				margin-left: 680px;
				/* 自动布局 */
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				border: 1px solid #fff;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
				padding: 8px 24px 8px 24px;
			}
		}
	}
</style>